<template>
  <div class="judges">
    <el-page-header @back="goBack" content="添加评委" class="judges_title">
    </el-page-header>
    <div class="judges_main">
      <div class="judges_download">
        <el-button icon="el-icon-download" type="success" size="max" @click="handleDown"> 下载表格</el-button>
      </div>

      <el-table
          :data="judges"
          border
          style="margin: 30px auto">
        <el-table-column
            label="序号"
            align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="用户名"
            align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="密码"
            align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.password }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
                v-show="!scope.row.edit"
                size="medium"
                type="danger"
                @click="handleDelete(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="add">
        <el-button class="el-icon-plus" type="primary" size="max" @click="handleAddJudges"> 添加</el-button>
        <el-button class="el-icon-plus" type="primary" size="max" @click="handleAddJudgesMuch"> 批量添加</el-button>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: "judges",
  data() {
    return{
      judges: [],
      newJudges: {
        number: 1,
        username: '',
        password: ''
      }
    }
  },
  methods: {
    goBack() {
      this.$router.push('/backIndex/AddJudges')
    },

    //下载
    async handleDown(){
      const gameID = {gameID: window.sessionStorage.getItem('gameID')};
      const res = await this.$api.downloadJudge(gameID);
      let a = document.createElement('a');
      a.href = res;
      a.click();
    },
    // 删除
    handleDelete(index,row) {
      if(window.sessionStorage.getItem('level') === '4' || window.sessionStorage.getItem('level') === '2'){
        let data = {};
        data.username = row.username;
        data.password = row.password;
        this.$api.deleteRandomJudge(data)
            .then(res => {
              if(res.success){
                this.judges.splice(index,1)
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
              } else {
                this.$message({
                  type: 'warning',
                  message: '删除失败，请重试！'
                })
              }
            });
      } else {
        return this.$message.warning('没有权限！');
      }
    },

    // 获取裁判
    getJudgeListInfo(){
      const gameID = Number(window.sessionStorage.getItem("gameID"));
      this.$api.getJudgeListInfo(gameID)
        .then(res => {
          for(let i =0; i < res.data.listInfo.length; i++){
            let index = this.judges.length;
            this.newJudges.number = (index + 1);
            this.newJudges.username = res.data.listInfo[i].username;
            this.newJudges.password = res.data.listInfo[i].password;
            let newJudges = JSON.stringify(this.newJudges);
            this.judges.push(JSON.parse(newJudges));
          }
        })
    },

    // 添加
    handleAddJudges(){
      if(window.sessionStorage.getItem('level') === '4' || window.sessionStorage.getItem('level') === '2'){
        const gameID = Number(window.sessionStorage.getItem("gameID"));
        const num = 1;
        let data = {};
        data.num = num;
        data.gameID = gameID;
        let index = this.judges.length;
        this.newJudges.number = (index + 1);
        this.$api.addJudges(data)
            .then(res => {
              this.newJudges.username = res[0].username;
              this.newJudges.password = res[0].password;
              let newJudges = JSON.stringify(this.newJudges);
              this.judges.push(JSON.parse(newJudges))
            }).catch(err =>{
          console.log(err);
        })
      } else {
        return this.$message.warning('没有权限！');
      }
    },

    // 批量添加
    handleAddJudgesMuch(){
      if(window.sessionStorage.getItem('level') === '4' || window.sessionStorage.getItem('level') === '2'){
        this.$prompt('请输入添加个数', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^[1-9]\d*$/,
          inputErrorMessage: '请输入一个正整数'
        }).then(({ value }) => {
          const gameID = Number(window.sessionStorage.getItem("gameID"));
          let data = {};
          data.num = value;
          data.gameID = gameID;
          this.$api.addJudges(data)
              .then(res =>{
                for (let i=0; i<value; i++) {
                  let index = this.judges.length;
                  this.newJudges.number = (index + 1);
                  this.newJudges.username = res[i].username;
                  this.newJudges.password = res[i].password;
                  let newJudges = JSON.stringify(this.newJudges);
                  this.judges.push(JSON.parse(newJudges))
                }
              })

          this.$message({
            type: 'success',
            message: '成功添加: ' + value + '个评委用户'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '以取消添加'
          });
        });
      } else {
        return this.$message.warning('没有权限！');
      }
    }
  },
  mounted() {
    this.getJudgeListInfo()
  }
}
</script>

<style lang="less" scoped>
.judges{
  .judges_title{
    margin-bottom: 20px;
  }
  .judges_main{
    background-color: #ffffff;
    padding: 40px 20px;
    //margin: 40px auto;
    box-shadow: 0 2px 7px rgba(187, 172, 172, 0.49), 0 5px 11px rgba(247, 231, 231, 0.36);
    //.add{
    //  width: 513px;
    //  margin: 0 auto;
    //  display: flex;
    //  flex-wrap: wrap;
    //}
    //.judges_download{
    //  width: 513px;
    //  margin: 0 auto;
    //}
  }
}


</style>
